<!-- Horizontal Form -->
 <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加用户</h3>
        <h3 class="msg"></h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
         
          <div class="form-group">
            <label for="usernameId" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
              <input type="text" name="username" class="form-control" id="usernameId">
            </div>
          </div>
          <div class="form-group" id="pwdDiv">
            <label for="passwordId" class="col-sm-2 control-label">密码</label>

            <div class="col-sm-10">
              <input type="password" name="password" class="form-control"  id="passwordId">
            </div>
          </div>
          
          
          <div class="form-group">
            <label for="addressId" class="col-sm-2 control-label">地址</label>
              <div class="col-sm-10">
              <input type="text" name="address" class="form-control"  id="addressId">
            </div>
          </div>
          
          <div class="form-group">
            <label for="phoneId" class="col-sm-2 control-label">手机号</label>
              <div class="col-sm-10">
              <input type="text" name="mobile" class="form-control"  id="phoneId">
            </div>
          </div>
          
           <div class="form-group">
            <label for="tiwenId" class="col-sm-2 control-label">体温</label>
              <div class="col-sm-10">
              <input type="text" name="tiwen" class="form-control"  id="tiwenId">
            </div>
          </div>
          
          <div class="form-group">
            <label for="health" class="col-sm-2 control-label">健康状况</label>
              <span class="col-sm-10">
              <select name="healthSe" id="healthSe"
					style="width: 500px; height: 38px; margin: -2px;"
					onChange="changeF();">
						<option id='1' value='无风险' >无风险</option>
						<option id='2' value='低风险' >低风险</option>
						<option id='3' value='中风险' >中风险</option>
						<option id='4' value='高风险' >高风险</option>
				</select>
				</span>
              <span style="position:absolute;">
              <input type="text" name="health" class="form-control"  id="health">
            </span>
          </div>
          <div class="form-group">
            <label for="rolesId" class="col-sm-2 control-label">角色</label>
            <div class="col-sm-10" id="rolesId">
              
            </div>
          </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">取消</button>
          <button type="button" class="btn btn-info pull-right btn-save">添加</button>
        </div>
        <!-- /.box-footer -->
      </form>
     
    </div>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js"></script>
<script type="text/javascript">
 
function changeF() {
	document.getElementById('health').value = document
			.getElementById('healthSe').options[document
			.getElementById('healthSe').selectedIndex].value;
}
 
 $(document).ready(function(){
	 //页面加载完成以后加载角色信息并初始化页面
	  doLoadRoles();
	 //事件注册
	 $(".box-footer")
	 .on("click",".btn-cancel",doCancel)
	 .on("click",".btn-save",doSaveOrUpdate);
	 
 });
 
 
 function doCancel(){
	$("#mainContentId").removeData("rowData");
	$("#mainContentId").load("user/user_list");
 }
 function doSaveOrUpdate(){
	 var rowData=$("#mainContentId").data("rowData");
	 //1.获取表单数据
	 var params=doGetEditFormData();
	 if(rowData)params.id=rowData.user.id;
	 //2.发起异步请求
	 var insertUrl="user/doSaveObjects";
	 var updateUrl="user/doUpdateObjects";
	 var url=rowData?updateUrl:insertUrl;
	 console.log(params);
	 $.post(url,params,function(result){
		 if(result.state==1){
			 alert(result.message);
			 doCancel();
		 }else{
			alert(result.message);
		 }
	 })
 }
 function doGetEditFormData(){
	 //获取用户输入的数据
	 var params={
	    username:$("#usernameId").val(),
	    password:$("#passwordId").val(),
	    address:$("#addressId").val(),
	    phoneId:$("#phoneId").val(),
	    tiwen:$("#tiwenId").val(),
	    health:$("#health").val()
	 }
	 //获取选择的角色
	 var roleIds=new Array();
	 $("#rolesId input[name='roleId']")
	 .each(function(){
		 if($(this).prop("checked")){
			roleIds.push($(this).val());
		 }
	 });
	 params.roleIds=roleIds.toString();
	 return params;
 }
 function doLoadRoles(){
	 var url="role/doFindRoles"
	 $.getJSON(url,function(result){
		 if(result.state==1){
		  doInitPageRoles(result.data);
		  doInitFormData();//修改时
		 }else{
		  alert(result.message);
		 }
	 })
 }
 function doInitFormData(){
     var data=$("#mainContentId").data("rowData");
     if(!data)return;
     $("#pwdDiv").remove();
	 console.log(data);
	 //初始化用户信息 
	 $("#usernameId").val(data.user.username);
	 $("#addressId").val(data.user.address);
	 $("#phoneId").val(data.user.phoneId);
	 $("#tiwenId").val(data.user.tiwen);
	 $("#health").val(data.user.health);
	
	 //初始化用户角色信息
	 var ids=data.roleIds;
	 for(var i in ids){
	  $("#rolesId input[value='"+ids[i]+"']")
	  .prop("checked",true);
	 }
 }
function doInitPageRoles(data){//List<CheckBox>
	 //1.获取角色要显示的位置对象
	 var div=$("#rolesId");
	 div.empty();
	 //2.迭代数据，将数据追加到div
	 var input="<input type='checkbox' name='roleId' value='[id]'>[name]"
	 for(var i in data){
		 //记住每次replace时都会产生一个新的字符串对象
		 var newInput=
		 input.replace("[id]",data[i].id)
		 .replace("[name]",data[i].name);
		 div.append(newInput)
	 }
}
</script>